<template>
	<view style="padding-bottom: 150rpx;">
		<view class="as_first">
			<text style="color: #3D3D3D;font-size: 28rpx;">售后进度</text>
			<view class="as_first_line"></view>
				<u-steps :list="numList" :current="0" direction='column' active-color='#8799a3'></u-steps>
		</view>
		<view class="as_first" style="margin-top: 20rpx;">
			<text style="color: #3D3D3D;font-size: 28rpx;">退货地址</text>
			<view class="as_first_line" style="margin-bottom: 20rpx;"></view>
			<view class="as_first_item">
				<view class="as_view">收件人：</view>
				<text class="as_text">12301</text>
			</view>
			<view class="as_first_item">
				<view class="as_view">联系方式：</view>
				<text class="as_text">889585424</text>
			</view>
			<view class="as_first_item">
				<view class="as_view">退货地址:</view>
				<text
					class="as_text">时代阳光大道旺府酒店写字楼618</text>
			</view>
		</view>

		<view class="as_first" style="margin-top: 20rpx;" >
			<text style="color: #3D3D3D;font-size: 28rpx;">退款明细</text>
			<view class="as_first_line" style="margin-bottom: 20rpx;"></view>
			<view class="as_first_item">
				<view class="as_view">微信支付</view>
				<text class="as_text" style="position: absolute;right: 30rpx;">￥188</text>
			</view>

		</view>

		<view class="as_first" style="margin-top: 20rpx;">
			<text style="color: #3D3D3D;font-size: 28rpx;">售后信息</text>
			<view class="as_first_line" style="margin-bottom: 20rpx;"></view>
			<view class="as_first_item">
				<view class="as_view">订单编号：</view>
				<text class="as_text">177855215262</text>
			</view>
			<view class="as_first_item">
				<view class="as_view">售后单号：</view>
				<text class="as_text">8925252255</text>
			</view>
			<view class="as_first_item">
				<view class="as_view">售后类型：</view>
				<text class="as_text">退货退款</text>
			</view>
			<view class="as_first_item">
				<view class="as_view">售后金额：</view>
				<text class="as_text">￥99</text>
			</view>
			<view class="as_first_item">
				<view class="as_view">退款方式：</view>
				<text class="as_text">原路退回</text>
			</view>
			<view class="as_first_item">
				<view class="as_view">退款件数：</view>
				<text class="as_text">1件</text>
			</view>
			<view class="as_first_item">
				<view class="as_view">退款原因：</view>
				<text class="as_text">{{obj.refundDesc||'未填写'}}</text>
			</view>
		</view>
		
		<u-button type="info" @click="cancelAfter()"  v-if="obj.status=='WAITPROCESS'" style="width: 220rpx;height: 72rpx;margin-top: 20rpx;float: right;margin-right: 50rpx;" shape="circle">撤销售后申请</u-button>
        <u-popup v-model="show" mode="center" width='380' height='230' border-radius='16' >
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;height: 100%;">
				<image src="https://aliyunoss.hntgov.net/h5/shhcexiao.png" style="width: 68rpx;height: 68rpx;margin-bottom: 20rpx;"></image>
				<text>撤销成功</text>
			</view>
        		</u-popup>
	</view>
</template>

<script>
	var that = ''
	export default {
		data() {
			return {
				show:false,
				numList: [],
				id: '',
				obj: ''
			}
		},
		onLoad(e) {
			that = this
			this.id=e.id
		},
		onShow() {
			this.getAfterSalesMethod()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '售后详情'
			})
		},
		methods: {
			getAfterSalesMethod() {
				this.$u.api.getAfterSales({id:this.id}).then(res => {
					this.obj=res
				this.numList=res.afterSalesOperationlog.map(item=>{
						return {
							name:item.content,
							time:item.createdTime
						}
					})
				})
			},
			cancelAfter(){
				this.$u.api.cancel({id:this.id}).then(res => {
					if(res){
						this.show=true
						this.getAfterSalesMethod()
					}
				})
				
			}
			
		}
	}
</script>
<style>
	page {
		background-color: #F7f7f7
	}
</style>
<style scoped lang="scss">
	.as_first {
		padding: 30rpx;
		background-color: #ffffff;

		.as_first_line {
			width: 690rpx;
			height: 1rpx;
			margin-top: 22rpx;
			background-color: #E7E6E6;
			margin-bottom: 40rpx;
		}
	}

	.as_first_item {
		font-size: 26rpx;
		display: flex;
		margin-top: 20rpx;

		.as_view {
			color: #696969;
			width: 150rpx;
		}

		.as_text {
			color: #181617;
		}
	}
</style>